<template>
  <div class="container">
    <navBar :title="'用户信息'" :backStep="'mine'"></navBar>

    <div class="cardBox">
      <div class="cardItem">
        <div class="leftImg">
          <div>用户账号：</div>
        </div>
        <div class="rightImg">
          {{ userInfo.userName }}
        </div>
      </div>
      <div class="cardItem">
        <div class="leftImg">
          <div>姓名：</div>
        </div>
        <div class="rightImg">
          {{ userInfo.name }}
        </div>
      </div>
      <div class="cardItem">
        <div class="leftImg">
          <div>联系电话：</div>
        </div>
        <div class="rightImg">
          {{ userInfo.phone }}
        </div>
      </div>
      <div class="cardItem">
        <div class="leftImg">
          <div>角色名称：</div>
        </div>
        <div class="rightImg">
          {{ userInfo.roleName }}
        </div>
      </div>
      <div class="cardItem">
        <div class="leftImg">
          <div>部门：</div>
        </div>
        <div class="rightImg">
          {{ userInfo.departmentName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from '@/components/navBar.vue'

export default {
  name: 'selfInfo',
  props: {},
  components: {
    navBar,
  },
  data() {
    return {
      userInfo: {},
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('loginInfo'))
  },
  methods: {},
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  background-color: #f5f6f7;
  width: 100%;
  height: 100vh;
  padding: 16px;
  box-sizing: border-box;
  padding-bottom: 60px;
}
.cardBox {
  // padding: 16px;
  // transform: translateY(-80px);
  .cardItem {
    background-color: #fff;
    height: 48px;
    // width: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    margin-top: 16px;
    .leftImg {
      display: flex;
      align-items: center;
      img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
    }
    .rightImg {
      img {
        width: 24px;
        height: 24px;
      }
    }
  }
}
</style>
